<template>

    <el-form :model="form" :rules="rules">

        <el-form-item label="学科名称" :label-width="90" prop="subjectName">
            <el-input v-model="form.subjectName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="是否展示" :label-width="90">
            <el-switch
                v-model="value2"
                class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
        </el-form-item>

        <el-row type="flex" justify="center">

          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="addSub">确认</el-button>

        </el-row>
    </el-form>

</template>

<script>
import { onMounted, reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { add, update } from '@/api/hmmm/subjects.js'

export default {
  name: '',
  components: {},
  props: {
    fixForm: {
      type: Object,
      required: true
    }
  },
  setup (props, { emit }) {
    const form = reactive({
      subjectID: undefined,
      tagName: undefined,
      subjectName: undefined,
      isFrontDisplay: undefined
    })

    const value2 = ref(true)

    const rules = reactive({
      subjectName: [{
        required: true,
        message: '字段值不可为空'
      }]
    })

    const newList = ref([])

    const cancel = () => {
      emit('close')
      form.subjectName = undefined
    }

    const addSub = async () => {
      if (props.fixForm.id) {
        if (value2.value) {
          props.fixForm.isFrontDisplay = 1
        } else {
          props.fixForm.isFrontDisplay = 0
        }
        props.fixForm.subjectName = form.subjectName
        await update(props.fixForm)
        props.fixForm.id = undefined
        form.subjectName = undefined
      } else {
        if (value2.value) {
          form.isFrontDisplay = 1
        } else {
          form.isFrontDisplay = 0
        }
        await add({
          subjectName: form.subjectName,
          isFrontDisplay: form.isFrontDisplay
        })
      }

      emit('close')
      ElMessage.success('操作成功')
      emit('resetList')
    }

    onMounted(() => {

    })

    return {
      form,
      rules,
      newList,
      addSub,
      value2,
      cancel
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
    width: 300px;
}
/deep/ .el-input--suffix {
    width: 283px;
}
</style>
